<!-- 全部策略 -->
<template>
	<view class="content">
		<view class="item-strategy" v-for="i in 4">
			<view class="summary">
				<view class="summary-title row">
					<text class="strategy-name">AI金字塔</text>
					<text class="strategy-name">huobi-u本位-BTC</text>
					<text class="strategy-status stop">已停止</text>
				</view>
			</view>
			<view class="summary">
				<view class="summary-title row">
					<text>投入资金</text>
					<text>累计收益/套利次数</text>
					<text>年华收益</text>
				</view>
				<view class="summary-content row">
					<text>32000(USDT)</text>
					<text>42677USDT/200次</text>
					<text>400%</text>
				</view>
			</view>
			<view class="summary">
				<view class="summary-title row">
					<text>今日收益</text>
					<text>持仓均价/数量</text>
					<text>爆仓价</text>
				</view>
				<view class="summary-content row">
					<text>40.09 USDT</text>
					<text>2000/2.27张</text>
					<text>----</text>
				</view>
			</view>

			<view class="strategy-btn">
				<u-button type="success" shape="square" size="mini" class="share">分享</u-button>
				<view class="set">
					<u-button type="info" shape="square" size="mini" class="share" @click="modify(i)">修改</u-button>
					<u-button type="success" shape="square" size="mini" class="share" @click="start">启动</u-button>
					<u-button type="primary" shape="square" size="mini" class="share" @click="pause">暂停</u-button>
					<u-button type="warning" shape="square" size="mini" class="share" @click="stop">停止</u-button>
					<u-button type="error" shape="square" size="mini" class="share" @click="del">删除</u-button>
				</view>
			</view>
		</view>
		<u-modal v-model="showstart" :show-cancel-button="true" :content="contentstart" @confirm="confirmstart" @cancel="cancelstart"></u-modal>
		<u-modal v-model="showpause" :show-cancel-button="true" :content="contentpause" @confirm="confirmpause" @cancel="cancelmpause"></u-modal>
		<u-modal v-model="showstop" :show-cancel-button="true" :content="contentstop" @confirm="confirmstop" @cancel="cancelstop"></u-modal>
		<u-modal v-model="showdel" :show-cancel-button="true" :content="contentdel" @confirm="confirmdel" @cancel="canceldel"></u-modal>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showModify:false,
				showstart:false,
				showpause:false,
				showstop:false,
				showdel:false,
				contentModify:'是否修改',
				contentstart:'是否启动',
				contentpause:'是否暂停',
				contentstop:'是否停止',
				contentdel:'是否删除',
			};
		},

		components: {},

		computed: {},

		mounted() {},

		methods: {
			modify(i){
				console.log(i)
				switch(i){
					case 1:
						this.$u.func.route("/pages/quant/modify-ai-contract")
						break;
					case 2:
						this.$u.func.route("/pages/quant/modify-smart-contract")
						break;
					case 3:
						this.$u.func.route("/pages/quant/modify-spot-ai")
						break
					case 4:
						this.$u.func.route("/pages/quant/modify-spot-network")
						break;
				}
				
			},
			start(){
				this.showstart = true;
			},
			pause(){
				this.showpause = true;
			},
			stop(){
				this.showstop = true;
			},
			del(){
				this.showdel= true;
			},
			confirmstart(){

			},
			confirmpause() {

			},
			confirmstop(){

			},
			confirmdel(){

			},
			cancelstart(){

			},
			cancelmpause() {

			},
			cancelstop() {

			},
			canceldel() {

			}
		},
	};
</script>
<style lang='scss' scoped>
	.content {
		color: aliceblue;
		padding-bottom: 100rpx;

		.item-strategy {
			display: flex;
			flex-direction: column;
			background-color: #151e3d;
			border-radius: 20rpx;
			color: cornflowerblue;
			margin: 20rpx;
			padding: 20rpx;

			.item-name {
				margin-bottom: 15rpx;
				font-size: 24rpx;
			}

			.summary {
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;

				.row {
					display: flex;
					min-width: 300rpx;
					margin-bottom: 5rpx;
					flex-direction: row;
					justify-content: space-between;

					.strategy-name {
						color: aliceblue;
					}

					.strategy-status {
						color: aqua;

						&.stop {
							color: orangered;
						}
					}

					text {
						text-align: center;
					}

					&.summary-title {
						min-width: 300rpx;
						font-size: 26rpx;
						margin: 10rpx 0 20rpx 0;
					}

					&.summary-content {
						font-size: 24rpx;
						color: aliceblue;

						text {
							display: flex;
							min-width: 80rpx;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}

			.strategy-btn {
				width: 90vw;
				display: flex;
				justify-content: space-between;
				// align-content: flex-end;
				// align-items: flex-end;
				flex-direction: row;
				.u-btn {
					margin: 0;
				}
				.share {
					
				}

				.set {
					color: #19be6b;
					min-width: 500rpx;
					display: flex;
					justify-content: space-between;
				}
			}

			.date {
				color: aliceblue;
				margin-bottom: 10rpx;
			}
		}


	}
</style>
